<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex" />
    <meta name="referrer" content="origin" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>SWAPI GraphQL API</title>
    <style>
      body {
        height: 100vh;
        margin: 0;
        overflow: hidden;
      }
      #splash {
        color: #333;
        display: flex;
        flex-direction: column;
        font-family: system, -apple-system, "San Francisco",
          ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP",
          "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
        height: 100vh;
        justify-content: center;
        text-align: center;
      }
    </style>
    <link rel="icon" href="favicon.ico" />
    <link
      type="text/css"
      href="//unpkg.com/graphiql/graphiql.min.css"
      rel="stylesheet"
    />
    <link
      type="text/css"
      href="//unpkg.com/@graphiql/plugin-explorer/dist/style.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="splash">Loading&hellip;</div>
    <script src="//unpkg.com/react/umd/react.production.min.js"></script>
    <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="//unpkg.com/graphiql/graphiql.min.js"></script>
    <script src="//unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"></script>
    <script>
      // Parse the search string to get url parameters.
      var search = window.location.search;
      var parameters = {};
      search
        .substr(1)
        .split("&")
        .forEach(function (entry) {
          var eq = entry.indexOf("=");
          if (eq >= 0) {
            parameters[decodeURIComponent(entry.slice(0, eq))] =
              decodeURIComponent(entry.slice(eq + 1));
          }
        });

      // if variables was provided, try to format it.
      if (parameters.variables) {
        try {
          parameters.variables = JSON.stringify(
            JSON.parse(parameters.variables),
            null,
            2
          );
        } catch (e) {
          // Do nothing, we want to display the invalid JSON as a string, rather
          // than present an error.
        }
      }

      // When the query and variables string is edited, update the URL bar so
      // that it can be easily shared
      function onEditQuery(newQuery) {
        parameters.query = newQuery;
        updateURL();
      }
      function onEditVariables(newVariables) {
        parameters.variables = newVariables;
        updateURL();
      }
      function onEditOperationName(newOperationName) {
        parameters.operationName = newOperationName;
        updateURL();
      }
      function updateURL() {
        var newSearch =
          "?" +
          Object.keys(parameters)
            .filter(function (key) {
              return Boolean(parameters[key]);
            })
            .map(function (key) {
              return (
                encodeURIComponent(key) +
                "=" +
                encodeURIComponent(parameters[key])
              );
            })
            .join("&");
        history.replaceState(null, null, newSearch);
      }

      const fetcher = GraphiQL.createFetcher({
        url:
          parameters.fetchURL ||
          "/graphql",
      });

      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();

      // Render <GraphiQL /> into the body.
      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: fetcher,
          query: parameters.query,
          variables: parameters.variables,
          operationName: parameters.operationName,
          onEditQuery: onEditQuery,
          onEditVariables: onEditVariables,
          onEditOperationName: onEditOperationName,
          plugins: [explorerPlugin]
        }),
        document.body
      );
    </script>
  </body>
</html>
